<template>
    <div class="personalview">
        <InfoBar></InfoBar>
        <div class="personal-teacher-detail">
            <router-view v-slot="{ Component }">
                <transition>
                    <keep-alive>
                        <component :is="Component" />
                    </keep-alive>
                </transition>
            </router-view>
        </div>
    </div>
</template>

<script setup>
import InfoBar from "@/views-front/PersonalView/PersonalInfoBar.vue"
window.scrollTo(0, 0)

</script>

<style lang="scss">
.personal-teacher-top {
    width: 670px;
    height: 60px;
    /* background-color: lightgreen; */
    font-size: 28px;
    margin: 55px 38px 28px 38px;
    border-bottom: 2px solid #f2f3f5;
}

.personalview {
    // height: 900px;
    background-color: rgb(242, 243, 245);
    // width: 100%;
    padding-top: 50px;
    // // background-color: lightblue;
    display: flex;
    align-items: center;
    justify-content: center;

}

// .active {
//     display: none;
// }

.personal-teacher-detail {
    width: 750px;
    height: 700px;
    // margin-left: auto;
    background-color: white;
    border-radius: 10px;
    justify-content: center;
    margin-left: 25px;
    margin-bottom: 30px;
}
</style>